<template>
  <!-- 预览短文 -->
  <el-drawer
    v-model="drawerVisible"
    :close-on-click-modal="false"
    :title="previewTitle"
    size="70%"
    class="drawer-dalog"
  >
    <div class="editor-content-view" id="essay-content" v-highlight>
      <div v-html="previewContext"></div>
    </div>
    <div class="position-flex-fexid">
      <div class="drawer-actions">
        <el-button type="primary" @click="downloadPng">下载图片</el-button>
        <el-button type="primary" @click="downloadPdf">下载PDF</el-button>
      </div>
    </div>
  </el-drawer>
</template>


<script>
import html2canvas from "html2canvas";
// 引入jsPDF库
import jsPDF from "jspdf";

export default {
  name: "PreviewContext",
  props: {
    previewTitle: {
      type: String,
      default: "",
    },
    previewContext: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      drawerVisible: false,
    };
  },
  methods: {
    openDrawer() {
        this.drawerVisible = true;
    },
    downloadPng() {
      let _this = this;
      const content = document.getElementById("essay-content");
      html2canvas(content, {
        allowTaint: true,
        scale: window.devicePixelRatio, // 提升画面质量，但是会增加文件大小
        useCORS: true, // 允许使用CORS资源
      }).then(function (canvas) {
        const link = document.createElement("a");
        link.href = canvas.toDataURL("image/png");
        // link.download =`image.png`  // 下载文件的名称
        link.download = _this.previewTitle;
        link.style.display = "none";
        // 将a标签追加到文档对象中
        document.body.appendChild(link);
        // 模拟点击了<a>标签,会触发<a>标签的href的读取,浏览器就会自动下载了
        link.click();
        // 一次性的,用完就删除a标签
        link.remove();
      });
    },
    downloadPdf() {
      let _this = this;
      const content = document.getElementById("essay-content");
      html2canvas(content, {
        allowTaint: true,
        scale: 2, // 提升画面质量，但是会增加文件大小
        useCORS: true, // 允许使用CORS资源
      }).then(function (canvas) {
        /**jspdf将html转为pdf一页显示不截断，整体思路：
         * 1. 获取DOM
         * 2. 将DOM转换为canvas
         * 3. 获取canvas的宽度、高度（稍微大一点）
         * 4. 将pdf的宽高设置为canvas的宽高
         * 5. 将canvas转为图片
         * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
         */

        // 得到canvas画布的单位是px 像素单位
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;

        console.log("contentWidth", contentWidth);
        console.log("contentHeight", contentHeight);
        // 将canvas转为base64图片
        var pageData = canvas.toDataURL("image/png", 1.0);

        // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
        // 2为上面的scale 缩放了2倍
        var pdfX = ((contentWidth + 10) / 2) * 0.75;
        var pdfY = ((contentHeight + 500) / 2) * 0.75; // 500为底部留白

        // 设置内容图片的尺寸，img是pt单位
        var imgX = pdfX;
        var imgY = (contentHeight / 2) * 0.75; //内容图片这里不需要留白的距离

        // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
        var PDF = new jsPDF("", "pt", [pdfX, pdfY]);

        // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
        PDF.addImage(pageData, "jpeg", 0, 0, imgX, imgY);
        PDF.save(_this.previewTitle + ".pdf");
      });
    },
  },
};
</script>


<style lang="scss">
@import "@wangeditor/editor/dist/css/style.css"; // 引入 css
@import "./custom-wangeditor.scss"; // 引入 css

.drawer-dalog {
//   position: relative;
}

.position-flex-fexid {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 80px;
  background: white;
}

.drawer-actions {
  display: flex;
  justify-content: flex-end;
  align-content: center;
  padding-top: 25px;
  padding-right: 50px;
}

::v-deep .el-drawer__title {
  font-size: 24px;
  color: #000;
}
.editor-content-view {
  padding-bottom: 100px;
}
</style>
